<template>

<div  id="b1" class="box_all" v-show="currentsection==0 || currentsection==1">
     <n-divider title-placement="left" >
                     随笔专栏
    </n-divider>
    <div v-if="de.length!=0">
        <div v-for="item in de" :key="item.index" >
                            <div id="text_default"> 
                                        <Skeleton :loading="false" animated>
                                                <template #template>
                                                    <Row>
                                                        <Col flex="1">
                                                            <Row>
                                                                <Col flex="0">
                                                                    <SkeletonItem type="circle" class="ivu-mr" />
                                                                </Col>
                                                                <Col flex="1">
                                                                    <SkeletonItem block width="20%" height="16px" />
                                                                    <SkeletonItem block width="50%" height="16px" />
                                                                </Col>
                                                            </Row>
                                                            <SkeletonItem block width="80%" height="16px"/>
                                                            <SkeletonItem width="8%" height="16px" class="ivu-mr" />
                                                            <SkeletonItem width="8%" height="16px" class="ivu-mr" />
                                                            <SkeletonItem width="8%" height="16px"/>
                                                        </Col>
                                                        <Col flex="0">
                                                            <SkeletonItem width="280px" height="140px" />
                                                        </Col>
                                                    </Row>
                                                </template>
                                                <template #default>
                                                    <List item-layout="vertical">
                                                        <ListItem  >
                                                            <ListItemMeta   :avatar="item.head_image" :title="item.title" :description="item.introduction" />
                                                            {{ item.text}}
                                                            <template #action>
                                                                <li><Icon :id="item.life_data_id" @click="render_details" type="md-book"  style="font-size:25px" /></li>
                                                            </template>
                                            
                                                        </ListItem>
                                                    </List>
                                                </template>
                                        </Skeleton>
        </div>
        </div>
    </div>
    <div v-else>
        <NOTEXT/>
    </div>
 
</div>


<div id="b2" class="box_all" v-show="currentsection==0 || currentsection==2">
     <n-divider title-placement="center" >
                     生活专栏
    </n-divider>
    <div v-if="li.length!=0" >

 
    <div v-for="item in li" :key="item.index">
                        <div id="text_default"> 
                                    <Skeleton :loading="false" animated>
                                            <template #template>
                                                <Row>
                                                    <Col flex="1">
                                                        <Row>
                                                            <Col flex="0">
                                                                <SkeletonItem type="circle" class="ivu-mr" />
                                                            </Col>
                                                            <Col flex="1">
                                                                <SkeletonItem block width="20%" height="16px" />
                                                                <SkeletonItem block width="50%" height="16px" />
                                                            </Col>
                                                        </Row>
                                                        <SkeletonItem block width="80%" height="16px"/>
                                                        <SkeletonItem width="8%" height="16px" class="ivu-mr" />
                                                        <SkeletonItem width="8%" height="16px" class="ivu-mr" />
                                                        <SkeletonItem width="8%" height="16px"/>
                                                    </Col>
                                                    <Col flex="0">
                                                        <SkeletonItem width="280px" height="140px" />
                                                    </Col>
                                                </Row>
                                            </template>
                                            <template #default>
                                                <List item-layout="vertical">
                                                    <ListItem >
                                                        <ListItemMeta   :avatar="item.head_image" :title="item.title" :description="item.introduction" />
                                                        {{ item.text}}
                                                        <template #action>
                                                           <li><Icon :id="item.life_data_id" @click="render_details" type="md-book"  style="font-size:25px" /></li>
                                                        </template>
                                        
                                                    </ListItem>
                                                </List>
                                            </template>
                                    </Skeleton>
      </div>
    </div>
    </div>
    <div v-else>
        <NOTEXT/>
    </div>
</div>
<div id="b3" class="box_all" v-show="currentsection==0 || currentsection==3">
     <n-divider title-placement="right" >
                     美食专栏
    </n-divider>
    <div v-if="fo.length!=0" >
    <div v-for="item in fo" :key="item.index">
                        <div id="text_default"> 
                                    <Skeleton :loading="false" animated>
                                            <template #template>
                                                <Row>
                                                    <Col flex="1">
                                                        <Row>
                                                            <Col flex="0">
                                                                <SkeletonItem type="circle" class="ivu-mr" />
                                                            </Col>
                                                            <Col flex="1">
                                                                <SkeletonItem block width="20%" height="16px" />
                                                                <SkeletonItem block width="50%" height="16px" />
                                                            </Col>
                                                        </Row>
                                                        <SkeletonItem block width="80%" height="16px"/>
                                                        <SkeletonItem width="8%" height="16px" class="ivu-mr" />
                                                        <SkeletonItem width="8%" height="16px" class="ivu-mr" />
                                                        <SkeletonItem width="8%" height="16px"/>
                                                    </Col>
                                                    <Col flex="0">
                                                        <SkeletonItem width="280px" height="140px" />
                                                    </Col>
                                                </Row>
                                            </template>
                                            <template #default>
                                                <List item-layout="vertical">
                                                    <ListItem >
                                                        <ListItemMeta   :avatar="item.head_image" :title="item.title" :description="item.introduction" />
                                                        {{ item.text}}
                                                        <template #action>
                                                              <li><Icon :id="item.life_data_id" @click="render_details" type="md-book"  style="font-size:25px" /></li>
                                                        </template>
                                        
                                                    </ListItem>
                                                </List>
                                            </template>
                                    </Skeleton>
      </div>
    </div>
    </div>
    <div v-else>
        <NOTEXT/>
    </div>
</div>
<div id="b4" class="box_all" v-show="currentsection==0 || currentsection==4">
     <n-divider title-placement="center" >
                     日记专栏
    </n-divider>
    <div v-if="di.length!=0" >
    <div v-for="item in di" :key="item.index">
                        <div id="text_default"> 
                                    <Skeleton :loading="false" animated>
                                            <template #template>
                                                <Row>
                                                    <Col flex="1">
                                                        <Row>
                                                            <Col flex="0">
                                                                <SkeletonItem type="circle" class="ivu-mr" />
                                                            </Col>
                                                            <Col flex="1">
                                                                <SkeletonItem block width="20%" height="16px" />
                                                                <SkeletonItem block width="50%" height="16px" />
                                                            </Col>
                                                        </Row>
                                                        <SkeletonItem block width="80%" height="16px"/>
                                                        <SkeletonItem width="8%" height="16px" class="ivu-mr" />
                                                        <SkeletonItem width="8%" height="16px" class="ivu-mr" />
                                                        <SkeletonItem width="8%" height="16px"/>
                                                    </Col>
                                                    <Col flex="0">
                                                        <SkeletonItem width="280px" height="140px" />
                                                    </Col>
                                                </Row>
                                            </template>
                                            <template #default>
                                                <List item-layout="vertical">
                                                    <ListItem >
                                                        <ListItemMeta   :avatar="item.head_image" :title="item.title" :description="item.introduction" />
                                                        {{ item.text}}
                                                        <template #action>
                                                             <li><Icon :id="item.life_data_id" @click="render_details" type="md-book"  style="font-size:25px" /></li>
                                                        </template>
                                        
                                                    </ListItem>
                                                </List>
                                            </template>
                                    </Skeleton>
      </div>
    </div>
    </div>
    <div v-else>
        <NOTEXT/>
    </div>
</div>


</template>

<script setup>
// 可优化但需要对表处理
import { onMounted ,ref,inject} from 'vue';
import { get_life_data } from '../../../api/life.js';
import { useRoute, useRouter } from 'vue-router';
import NOTEXT from '@/components/common/interest/notext.vue';

let user= inject('user')()
let Route_=useRoute()
let Router=useRouter()
let life_Data = ref([])
let de = ref([])
let li = ref([])
let fo = ref([])
let di = ref([])
let currentsection=ref(0)


const render_details=function(e) {
    const ID = e.target.getAttribute('id')
    Router.push({ name: 'render_life_Data' ,query:{id:ID}});
}

onMounted(async () => {
    currentsection.value=Route_.query.id || 0
    if (user.value.get_user_life_data() == undefined) {
        user.value.user_life_data =await get_life_data(user.value.get_user().id,1)
    } 
    if (user.value.get_user_life_data()) { 
        life_Data.value = user.value.get_user_life_data()
        if (life_Data.value.length > 0) { 
            life_Data.value.forEach((item) => { 
                if (item.kind== 'default') { 
                    de.value.push(item)
                }
                if (item.kind== 'life') { 
                    li.value.push(item)
                }
                if (item.kind== 'diary') { 
                    di.value.push(item)
                }
                if (item.kind== 'food') { 
                    fo.value.push(item)
                }
            })
        }
           

    }
    
    
    if (Route_.query.id !=0) {
        if (Route_.query.id == 1) {
            li.value = []
            di.value = []
            fo.value=[]
        }
        if (Route_.query.id == 2) {
            de.value = []
            di.value = []
            fo.value=[]
        }
        if (Route_.query.id == 3) {
            de.value = []
            li.value = []
           
            fo.value=[]
        }
        if (Route_.query.id == 4) {
            de.value = []
            li.value = []
            di.value = []
            
        }
    }

    
})



</script>

<style scoped>
.life_body_display{
    display: inline-block;
    height: 87vh;
    width: 80vw;
    vertical-align:top;
    margin:5px 5px 0 20px;
    /* border: solid 1px bisque; */
    position:absolute;
    font-size: 18px;
    padding: 5px 5px 5px 5px;
    overflow: scroll;

}
 ::-webkit-scrollbar {
    display: none;
 }

</style>
